<template>
  <div class="tactical-review-container">
    <div class="page-header">
      <div class="header-content">
        <h2>ATT&CK管理</h2>
        <!-- <p>分析和回顾历史战术演练活动</p> -->
      </div>
      <div class="header-actions">
        <el-button type="success" @click="handleCreate">
          <el-icon><Plus /></el-icon>
          添加ATT&CK
        </el-button>
        <el-button type="primary" @click="generateReport">
          <el-icon><Download /></el-icon>
          导出矩阵
        </el-button>
        <el-button type="primary" @click="generateReport">
          <el-icon><Refresh /></el-icon>
          同步官方库
        </el-button>
        <!-- <el-button type="primary" @click="generateReport">
          <el-icon><TrendCharts /></el-icon>
          趋势分析
        </el-button>
        <el-button type="primary" @click="generateReport">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button> -->
        <!-- <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button> -->
      </div>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in dataTypes" :key="item.label">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-number">{{ item.value }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="技术ID或名称">
            <el-input
              v-model="filterForm.name"
              placeholder="搜索技术ID或名称"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="战术">
            <el-select
              v-model="filterForm.severity"
              placeholder="请选择战术"
              clearable
            >
              <el-option label="初始访问" value="critical" />
              <el-option label="执行" value="critical" />
              <el-option label="持久化" value="high" />
              <el-option label="权限提升" value="medium" />
            </el-select>
          </el-form-item>
          <el-form-item label="系统">
            <el-select
              v-model="filterForm.severity"
              placeholder="请选择系统"
              clearable
            >
              <el-option label="Windows" value="Windows" />
              <el-option label="Linux" value="Linux" />
              <el-option label="MACOS" value="SCADA" />
              <el-option label="NETWORK" value="PLC" />
              <el-option label="Industri" value="Industry" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="时间">
            <el-select
              v-model="filterForm.range"
              placeholder="请选择时间"
              clearable
            >
              <el-option label="今天" value="critical" />
              <el-option label="本周" value="high" />
              <el-option label="本月" value="medium" />
              <el-option label="本季度" value="medium" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
            />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-section">
        <el-table :data="attackTechniques" stripe>
          <el-table-column prop="techniqueId" label="技术ID" width="100" />
          <el-table-column prop="name" label="技术名称" />
          <el-table-column prop="tactic" label="战术阶段" width="120">
            <template #default="{ row }">
              <el-tag :type="getTacticType(row.tactic)">{{
                row.tactic
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="platforms" label="平台" width="180">
            <template #default="{ row }">
              <el-tag
                v-for="platform in row.platforms"
                :key="platform"
                size="small"
                class="system-tag"
                >{{ platform }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="tools" label="相关工具" />
          <el-table-column prop="status" label="验证状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">{{
                row.status
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-tooltip content="查看详情" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleSee(row)">
                  <el-icon><View /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="漏洞利用" placement="top" show-after="1000">
                <el-button type="primary" link @click="testTechnique(row)">
                  <el-icon><Aim /></el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :title="viewDetail.title"
      v-model="viewDetail.open"
      width="800px"
      append-to-body
    >
      <Form
        v-if="viewDetail.open"
        :columns="viewDetail.columns"
        :data="viewDetail.form"
        :rules="viewDetail.rules"
        :inline="false"
        :disabled="viewDetail.disabled"
        :buttons="viewDetail.buttons"
        :key="viewDetail.disabled"
        height="400px"
        @submit="viewDetail.submit"
        @cancel="viewDetail.cancel"
      >
      </Form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import {
  Refresh,
  Plus,
  Download,
  View,
  Edit,
  Aim,
} from "@element-plus/icons-vue";

const dataTypes = [
  { label: "技术总数", value: "342" },
  { label: "战术类型", value: "28" },
  { label: "已验证", value: "76" },
  { label: "覆盖率", value: "15" },
];

function getTacticType(tactic) {
  const map = {
    发现: "primary",
    凭据访问: "warning",
    初始访问: "danger",
  };
  return map[tactic] || "info";
}

function getStatusType(status) {
  const map = {
    已验证: "success",
    待验证: "warning",
  };
  return map[status] || "info";
}

// 模拟攻击技术数据
const attackTechniques = ref([
  {
    id: 1,
    techniqueId: "T1046",
    name: "网络服务扫描",
    tactic: "发现",
    platforms: ["Windows", "Linux"],
    tools: "Nmap, Masscan",
    status: "已验证",
  },
  {
    id: 2,
    techniqueId: "T1040",
    name: "网络嗅探",
    tactic: "凭据访问",
    platforms: ["Network"],
    tools: "Wireshark, tcpdump",
    status: "已验证",
  },
  {
    id: 3,
    techniqueId: "T1190",
    name: "面向外部的应用程序利用",
    tactic: "初始访问",
    platforms: ["Windows", "Linux"],
    tools: "Metasploit, Burp Suite",
    status: "待验证",
  },
]);

// 筛选表单
const filterForm = reactive({
  name: "",
  type: "",
});

const handleSearch = () => {
  pagination.page = 1;
  fetchData();
};

const resetFilter = () => {
  filterForm.name = "";
  filterForm.type = "";
  handleSearch();
};

// 方法
const generateReport = () => {
  ElMessage.success("正在执行操作...");
};

const testTechnique = (row) => {
  ElMessage.info(`验证技术: ${row.name}`);
};

// 列字段
const columns = ref([
  {
    prop: "techniqueId",
    label: "技术ID",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "name",
    label: "技术名称",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "tactic",
    label: "战术阶段",
    type: "select",
    options: [
      { value: "发现", label: "发现" },
      { value: "凭据访问", label: "凭据访问" },
      { value: "初始访问", label: "初始访问" },
    ],
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "platforms",
    label: "平台",
    type: "checkbox",
    width: "100%",
    options: [
      { value: "Linux", label: "Linux" },
      { value: "Network", label: "Network" },
      { value: "Windows", label: "Windows" },
      { value: "Web", label: "Web" },
    ],
    formItemWidth: "100%",
  },
  {
    prop: "tools",
    label: "相关工具",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "status",
    label: "验证状态",
    type: "select",
    width: "100%",
    options: [
      { value: "已验证", label: "已验证" },
      { value: "待验证", label: "待验证" },
    ],
    formItemWidth: "100%",
  },
]);
const handleCreate = () => {
  viewDetail.value.title = "创建";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = {};
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};

const handleSee = (row) => {
  viewDetail.value.title = "查看";
  viewDetail.value.disabled = true;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
  ];
};
const handleEdit = (row) => {
  viewDetail.value.title = "编辑";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};
const viewDetail = ref({
  title: "",
  open: false,
  disabled: false,
  form: {
    id: "",
    timeAppointment0: null,
    timeAppointment1: null,
    street: null,
    address: null,
    cusAddress: null,
    remark: null,
  },
  originData: {},
  columns: [
    {
      title: "",
      cols: columns.value,
    },
  ],
  rules: [],
  submit: (val) => {
    if (val.id) {
      ElMessage.success("编辑ATTACK成功");
    } else {
      attackTechniques.value.push(val);
      ElMessage.success("添加ATTACK成功");
    }
    viewDetail.value.open = false;
  },
  cancel: () => {
    viewDetail.value.open = false;
  },
  buttons: [
    { type: "primary", text: "保存", prop: "submit" },
    { type: "default", text: "取消", prop: "cancel" },
  ],
});
</script>

<style lang="scss" scoped>
.tactical-review-container {
  background-color: var(--bg-color);
}

  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.stats-section {
  margin-bottom: 20px;

  .stat-card {
    .el-card__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }

    .stat-content {
      .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }

    .stat-icon {
      font-size: 48px;
      opacity: 0.8;
    }
  }
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

  .chart-placeholder {
    text-align: center;
    color: var(--text-color-secondary);

    p {
      margin-top: 16px;
      font-size: 16px;
    }
  }
}

.recent-records {
  .el-table {
    margin-top: 20px;
  }
}

.summary-analysis {
  .analysis-content {
    h4 {
      color: var(--text-color);
      margin: 20px 0 12px 0;
      font-size: 16px;
      font-weight: 600;

      &:first-child {
        margin-top: 0;
      }
    }

    ul {
      margin: 0 0 20px 0;
      padding-left: 20px;

      li {
        color: var(--text-color-secondary);
        line-height: 1.6;
        margin-bottom: 8px;
      }
    }
  }
}
.system-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
